<template>
	<view class="container">
		<navigator url="/pages/demo1/demo1" hover-class="navigator-hover">跳转到demo1页面</navigator>
		<navigator url="/pages/demo2/demo2" hover-class="navigator-hover">跳转到demo2页面</navigator>
		<navigator url="/pages/demo3/demo3" hover-class="navigator-hover">跳转到demo3页面</navigator>
		<navigator url="/pages/demo4/demo4" hover-class="navigator-hover">跳转到demo4页面</navigator>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
</script>

<style lang="scss" scoped>
	.container {
		padding: 40rpx;
		font-size: 14px;
		line-height: 24px;
		display: flex;
		flex-direction: column;
		align-items: center;

		navigator {
			margin-bottom: 20rpx;
			border: 1px solid #233;
			border-radius: 16rpx;
			padding: 10rpx 20rpx;
		}
	}
</style>